<template>
    <div class="slot">

        <Test ref="test" :name>
            <template #default="{ foo, bar, abb, s, id }">
                <div>
                    {{ foo }}
                    {{ bar }}
                    {{ abb }}
                    {{ s }}
                    {{ id }}
                </div>
            </template>
            <template v-slot:color="a">
                <div>
                    123 {{ a }}
                </div>
            </template>
        </Test>
        <button @click="addTest"></button>


        <el-divider />

        <h1>store</h1>
        <el-button @click="changeCount">changeCount</el-button>
        {{ count }}
        --
        {{ countStore.count }}
    </div>
</template>

<script setup lang="ts">
import Test from './components/Test.vue'
import { useCounterStore } from '@/stores/counter.ts'

const swg = ref({ f: 1, c: 2 })
provide('swg', swg)
const test = useTemplateRef('test')
const addTest = () => {
    test.value?.add()
}
const name = ref('name')

const countStore = useCounterStore()

// 响应式解构pinia >-- store
const { count } = storeToRefs(countStore)

const changeCount = () => {
    count.value++
    countStore.count++
    countStore.increment()
}



</script>